<template>
	<view class='index_tab'>
		<scroll-view scroll-x style="width: 100%;white-space: nowrap;" class="stauts_header" scroll-with-animation="true">
			<!-- <view :class="{one: true, this: status == 0}" @click="status = 0">待付款</view> -->
			<!-- <view class="one">待处理</view> -->
			<view :class="{one: true, this: status == 1}" @click="status = 1">待上桌</view>
			<view :class="{one: true, this: status == 2}" @click="status = 2">已完成</view>
			<!-- <view class="one">已取消</view> -->
		</scroll-view>
		<view class="order_list" @touchstart="start" @touchend="end">
			<view class="order" v-for="item in orderList" :key="item.order_id">
				<view class="content_">
					<view class="title">
						<view>订单编号：{{ item.order_id }}</view>
						<!-- <text v-if="status == 0">等待付款</text> -->
						<text v-if="status == 1">等待上桌</text>
						<text v-if="status == 2">已完成</text>
					</view>
					<view class="card" v-for="food in item.food_list.data" :key="food.food_id">
						<view class="card-img">
							<image class="cu-btn" :src="food.food_img"></image>
						</view>
						<view class="card-text">
							<view class="card-text_">
								<text>{{ food.food_name }}</text>
								<view v-if="isCanPay == 1">
									<view>￥{{ food.food_price }}</view>
									<text>x {{ food.selected_num }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="card-button" v-if="status == 0">
						<!-- <view hover-class="delete">取消</view> -->
						<view hover-class="pay-this" class="pay" @click="pay(item.order_id)">付款</view>
					</view>
				</view>
				<view class="bottom-title" v-if="isCanPay == 1">
					总价：￥{{item.order_price}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import tips from '@/common/tips.js'
	import login from '@/common/login.js'
	import check from '@/common/check.js'
	
	export default {
		data() {
			return {
				status: 1,
				orderList: [],
				startData: {
					clientX: null,
					clientY: null,
				},
				isCanPay: 0
			}
		},
		onShow() {
			login.getAuth((res) => {
				this.getOrderList()
			}, () => {
				this.getOrderList()
			})
		},
		onLoad(args) {
			if (args.status) {
				this.status = args.status
			}
			check.checkIsCanPay(data => {
				this.isCanPay = data
			})
		},
		watch: {
			status(status) {
				this.getOrderList()
			}
		},
		methods: {
			start(e) {
				this.startData.clientX = e.changedTouches[0].clientX;
				this.startData.clientY = e.changedTouches[0].clientY;
			},
			end(e) {
				const subX = e.changedTouches[0].clientX - this.startData.clientX;
				const subY = e.changedTouches[0].clientY - this.startData.clientY;
				if (subY > 50 || subY < -50) {
					// console.log('上下滑')
				} else {
					// let index = this.cidList.indexOf(this.cid)
					if (subX > 50) {
						// 右滑
						this.status = 1
					} else if (subX < -50) {
						// console.log('左滑')
						this.status = 2
					} else {
						// console.log('无效')
					}
				}
			},
			pay(orderId) {
				uni.request({
					url: 'https://restaurant.lgdweb.com/api/order/pay/id/' + orderId,
					method: 'post',
					success: res => {
						if (res.data.status == 0) {
							this.status = 1;
						} else {
							uni.showToast({
								'title': '付款失败',
								'icon': 'error'
							})
						}
					},
					fail: err => {
						console.log(err)
					}
				});
			},
			getOrderList() {
				uni.request({
					url: 'https://restaurant.lgdweb.com/api/order/partList/user_id/' + uni.getStorageSync('user_id') + '/status/' + this.status,
					success: res => {
						this.orderList = res.data.data.orderList;
					},
					fail: err => {
						console.log(err)
					}
				});
			}
		}
	}
</script>
<style>
	.stauts_header {
		position: fixed;
		width: 100%;
		height: 30px;
		top: 0;
		z-index: 10;
		background-color: #eee;
	}

	..stauts_header view {
		padding: 10px 0;
	}

	.order_list {
		margin-top: 30px;
		min-height: 93vh;
	}

	.card-button>.pay {
		background-color: #FFBD27;
	}

	.card-button>.pay-this {
		opacity: 0.6;
	}

	.this {
		background-color: white;
		font-size: 1.1rem;
		color: #fa9b4e;
	}

	#tt {
		background-color: #CCCCCC;
	}

	.one {
		display: inline-block;
		padding: 1px 0 0 10px;
		width: 50%;
		height: 30px;
		text-align: center;
	}

	.card-button>.delete {
		background-color: #DDDDDD;
	}

	.order {
		width: 100%;
		background-color: #f4f4f4;
		border-bottom: 1px solid #eee;
		padding: 0 10rpx;
	}

	.content_ {
		width: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.title {
		width: 100%;
		line-height: 30px;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.title>view {
		color: #666;
	}

	.title>text {
		color: #fa9b4e;
	}

	.bottom-title {
		font-weight: bold;
		font-size: 1rem;
		width: 100%;
		text-align: right;
		line-height: 40px;
		background-color: #fff;
		padding: 0 20rpx;
	}

	.card {
		width: 100%;
		height: 100px;
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
	}

	.card-img {
		padding: 0 7px;
	}

	.card-img>image {
		width: 120px;
		height: 80px;
	}

	.card-text {
		height: 100px;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.card-text_ {
		width: 100%;
		height: 60px;
		display: flex;
		flex-direction: row;
	}

	.card-text_>text {
		width: 80%;
		padding-left: 20rpx;
		color: #444;
		font-size: 1rem;
	}

	.card-text_>view {
		padding-right: 20rpx;
		width: 20%;
		text-align: right;
	}

	.card-text_>view>view {
		color: #444;
		font-weight: 600;
		margin-bottom: 10rpx;
	}

	.card-text_>view>text {
		font-size: 0.9rem;
		color: #999;
	}

	.card-button {
		display: flex;
		margin-left: 550rpx;
	}

	.card-button>view {
		background-color: #fff;
		width: 150rpx;
		text-align: center;
		border-radius: 15px;
		border: 1px solid#d6d6d6;
		color: #444;
		padding: 12rpx 30rpx;
		margin-left: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
